<template>
	<view class="main">
		<!-- <view class="hand">
			<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//dbleft.png" @click="blackbtn"></image>
		</view> -->
		<tou_hand1 handtitle='添加小区'></tou_hand1>
		<view class="show">
			<view class="sone">
				<view class="soneleft">项目位置：</view>
				<view class="soneright" @click="showPicker = true">{{value}}</view>
			</view>
			<view class="sone">
				<view class="soneleft">小区名称：</view>
				<input placeholder="请输入小区名称" v-model="projectName" maxlength="100" />
			</view>
			<view class="sone" :class="code ? '' : 'disable'">
				<view class="soneleft">街道：</view>
				<view class="soneright" @click="openDetailPicter('street')">
					{{codeGroup.street.name ? codeGroup.street.name :'请选择街道'}}
				</view>
			</view>
			<view class="sone" :class="codeGroup.street.code ? '' : 'disable'">
				<view class="soneleft">居委：</view>
				<view class="soneright" @click="openDetailPicter('committee')">
					{{codeGroup.committee.name ? codeGroup.committee.name : '请选择居委'}}
				</view>
			</view>
			<view class="sone">
				<view class="soneleft">小区地址：</view>
				<input placeholder="请输入小区详细地址" v-model="address" maxlength="100" />
			</view>
			<view class="sone">
				<view class="soneleft">区域联系人：</view>
				<input placeholder="请输入小区联系人" v-model="phoneName" />
			</view>
			<view class="sone">
				<view class="soneleft">联系人电话（客服）：</view>
				<input placeholder="请输入联系人电话" v-model="phone" />
			</view>
			<view class="sone">
				<view class="soneleft">微信客服二维码：</view>
				<view class="soneright">请上传客服的二维码</view>
			</view>
			<view class="kfour">
				<view class="kfourtxt">
					客服二维码上传：<span class="kfourbud">限制1张</span>
				</view>
				<view class="kfourfoot">
					<view class="add-img-box">
						<view class="add-img-item" v-for="(item, index) in imgList" :key="index">
							<image class="add-img" @click="imgInfo(index)" :src="item.path" mode="aspectFill"></image>
							<image class="add-img-del" @click="delImg(index)"
								src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//delete.png"></image>
						</view>
						<view v-if="imgList.length < 1 " class="add-img-item" @click="openCamera">
							<image class="add-img" src="https://qiniu.jxyutuo.com/yanqin/tabBarimg//add.png"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="stwo" @click="tjbtn">
				提交审核
			</view>
			<van-popup :show="showPicker" round position="bottom">
				<van-picker :loading="!columns.length" show-toolbar :columns="columns" value-key="name"
					@cancel="showPicker = false" @confirm="onConfirm" @change="onAreaChange" />
			</van-popup>
			<!-- 街道居委列表 -->
			<van-popup :show="showDetailPicker" round position="bottom">
				<van-picker :loading="detailLoading" show-toolbar :columns="detailColumns" value-key="name"
					@cancel="showDetailPicker = false" @confirm="onConfirmDetail" />
			</van-popup>
		</view>

	</view>
</template>

<script>
	import tou_hand1 from '../../components/tou_hand1/tou_hand1.vue'
	import {
		Config
	} from '../../common/Config.js'
	export default {
		components: {
			tou_hand1
		},
		mounted() {

		},

		data() {
			return {
				detailLoading: false,
				detailColumns: [], // 街道居委列表
				showDetailPicker: false, // 打开街道居委选择器
				// 街道居委代码集合
				codeGroup: {
					active: null,
					street: {
						code: null,
						name: null
					},
					committee: {
						code: null,
						name: null
					}
				},
				imgList: [],
				cloudimgList: [],
				imgCount: 1, //最多支持3张上传，可以修改
				value: '请选择城市',
				showPicker: false,
				columns: [], //省市区内容
				projectName: "", //小区名
				address: "", //地址
				phoneName: "", //区域联系人
				phone: "", //区域联系人电话（客服电话）
				code: "", //省市的区域编码
				hat: []
			}
		},
		onLoad() {
			this.adress();
		},
		methods: {
			// 街道居委关闭弹窗
			onConfirmDetail(item) {
				console.log(item);
				let type = this.codeGroup.active
				let name = item.detail.value.name;
				let code = item.detail.value.code;

				console.log("code=" + code + "，name=" + name);

				if (type) {
					this.codeGroup[type].code = code
					this.codeGroup[type].name = name
					// 选择街道后初始化居委信息
					type === 'street' ? this.codeGroup['committee'] = {
						code: null,
						name: null
					} : false
				}
				this.showDetailPicker = false

			},
			// 打开居委街道弹窗
			openDetailPicter(type) {
				let code = type === 'street' ? this.code : this.codeGroup.street.code
				if (!code) return

				this.detailLoading = true
				this.detailColumns = []
				this.showDetailPicker = true
				this.codeGroup.active = type
				// 特别行政区不足13位时补零，其他不足12位时补0
				let codeId = code.padEnd([81, 82, 71].includes(code.slice(0, 2)) ? 13 : 12, 0)
				this.$base.request1(`workUnit/getOptions/${codeId}`, 'GET')
					.then(res => {
						this.detailColumns = res.data.data.length ? res.data.data : [{
							name: '暂无',
							code
						}]
						this.detailLoading = false
					})
					.catch(err => {

					})
			},
			// 获取省/市/区
			adress() {
				this.$base.request1('workUnit/', 'GET')
					.then(res => {
						var arealist = res.data.data;
						let columns = [{
								values: arealist
							},
							{
								values: arealist[0]['children'],
								defaultIndex: 0
							},
							{
								values: arealist[0]['children'][0]['children'],
								defaultIndex: 0
							},
						];
						this.columns = columns;
					})
					.catch(err => {

					})
			},
			//返回上一页
			blackbtn() {
				uni.navigateBack()
			},

			//上传图片
			imgInfo(i) {
				let tempList = [];
				this.imgList.forEach(img => {
					tempList.push(img.path);
				});
				//显示图片
				uni.previewImage({
					current: i,
					loop: false,
					urls: tempList,
					indicator: 'default'
				});
			},
			//删除图片
			delImg(i) {
				this.imgList.splice(i, 1);
				this.hat.splice(i, 1);
				this.imgCount++;
			},
			openCamera() {
				uni.chooseImage({
					// sourceType: ['camera'],
					count: this.imgCount,
					sizeType: ['compressed'],
					success: res => {

						let path = res.tempFilePaths[0];
						let userToken = uni.getStorageSync('userToken');
						uni.showLoading({
							title: '上传中',
							mask: true
						})
						uni.uploadFile({
							url: Config.api + 'uploadFile',
							filePath: path,
							name: 'file',
							header: {
								Authorization: "Bearer " + userToken
							},
							success: res1 => {
								setTimeout(() => {
									uni.hideLoading()
								}, 200)
								this.hat.push(JSON.parse(res1.data).data.fileName)
							}

						});
						this.imgList = [...this.imgList, ...res.tempFiles];
						this.imgCount = 3 - this.imgList.length;
					}
				});

			},

			//选择
			onAreaChange(e) {
				console.log(e);
				const {
					picker,
					value,
					index
				} = e.detail;
				if (index === 0) {
					// 修改省
					picker.setColumnValues(1, value[0].children);
					picker.setColumnValues(2, value[0].children[0].children);
				} else if (index === 1) {
					// 修改市
					picker.setColumnValues(2, value[1].children);
				}
			},
			//选择省市区确认按钮
			onConfirm(e) {
				console.log(e);
				let value = e.detail.value
				let addr_value = value[0].name + ' ' + value[1].name + ' ' + value[2].name;
				console.log(addr_value);
				this.code = value[2].code
				this.value = addr_value;
				this.showPicker = false;
				console.log(this.code);
			},
			//提交审核
			tjbtn() {
				if (!this.code || !this.projectName || !this.address || !this.phoneName || !this.phone) {
					uni.showToast({
						title: '请完善信息',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				let str = "";
				for (var i = 0; i < this.hat.length; i++) {
					str += this.hat[i] + ",";
				}
				if (str.length > 0) {
					str = str.substr(0, str.length - 1);
				}
				// code优先级: 居委 - 街道 - 省市区 
				let code = this.codeGroup.committee.code ? this.codeGroup.committee.code : (this.codeGroup.street.code ?
					this.codeGroup.street.code : this.code)
				let data = {
					code,
					projectName: this.projectName,
					address: this.address,
					phoneName: this.phoneName,
					phone: this.phone,
					imgNames: str
				}
				var header = {
					'content-type': 'application/json'
				}
				this.$base.request1('manager/project', 'POST', data, header)
					.then(res => {
						if (res.data.code == 200) {
							uni.showToast({
								title: '提交成功,等待审核',
								duration: 2000,
							});
							uni.setStorageSync('typeone', 2)
							uni.navigateTo({
								url: '/manager_pages/project_management/project_management',
							});
						} else {
							uni.showToast({
								title: res.data.msg,
								duration: 2000,
								icon: 'none'
							});
						}
					})
					.catch(err => {

					})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		overflow-x: hidden;

		.disable {
			background-color: #ebedf0;
		}

		.show {
			width: 100%;
			box-sizing: border-box;
			padding: 20upx 0;

			/deep/.van-picker__toolbar {
				.van-picker__confirm {
					border: 0upx solid;
					background-color: #FFFFFF;
				}

				.van-picker__cancel {
					border: 0upx solid;
					background-color: #FFFFFF;
				}
			}

			.sone {
				width: 100%;
				border-bottom: 1upx solid #d6d6d6;
				display: flex;
				box-sizing: border-box;
				padding: 30upx 23upx;
				align-items: center;

				.soneleft {
					font-size: 28upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					color: #666666;
					width: 39.2%;
				}

				.soneright {
					width: 55%;
					font-size: 24upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					color: #999999;
				}

				input {
					font-size: 24upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					color: #999999;
				}
			}

			.kfour {
				width: 100%;
				box-sizing: border-box;
				margin-top: 35upx;
				padding-left: 10upx;

				.kfourtxt {
					font-size: 28upx;
					font-family: PingFang SC Medium, PingFang SC Medium-Medium;
					font-weight: 500;
					color: #333333;

					.kfourbud {
						font-size: 24upx;
						color: #666666;
					}
				}

				.add-img-box {
					display: flex;
					width: 750rpx;
					//padding: 0 40rpx;
					flex-direction: row;
					flex-wrap: wrap;
				}

				.add-img-item {
					width: 128upx;
					height: 128upx;
					border-radius: 16upx;
					position: relative;
					padding: 9rpx 0;
					margin-right: 20upx;
				}

				.add-img-camera {
					flex: 1;
				}

				.add-img {
					width: 128upx;
					height: 128upx;
					border-radius: 16upx;
				}

				.add-img-del {
					position: absolute;
					width: 40rpx;
					height: 40rpx;
					right: -14upx;
					top: -6upx;
					border-radius: 20rpx;
				}

				.address-time {
					width: 484rpx;
					height: 88rpx;
					background-color: rgba(245, 245, 245, 1);
					opacity: 1;
					border-radius: 24rpx;
					text-align: center;

					font-size: 35rpx;
					font-weight: 500;
					color: rgba(51, 51, 51, 1);
				}

				.line {
					width: 750rpx;
					height: 1px;
					transform: scaleY(0.3);
					background-color: rgba(0, 0, 0, 0.5);
				}
			}

			.stwo {
				width: 686upx;
				height: 88upx;
				border-radius: 16upx;
				box-shadow: 0upx 4upx 9upx 0upx rgba(19, 103, 197, 0.6);
				background-color: #4B98ED;
				font-size: 32upx;
				font-family: PingFang SC Bold, PingFang SC Bold-Bold;
				font-weight: 700;
				text-align: center;
				line-height: 88upx;
				margin: 0 auto;
				color: #ffffff;
				margin-top: 50upx;
			}
		}

	}
</style>